﻿<phone:PhoneApplicationPage 
    x:Class="Omnia.Wallet.Views.CategoryEditView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewmodel="clr-namespace:Omnia.ViewModels;assembly=Omnia.ViewModels"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:UX="clr-namespace:Omnia.UX;assembly=Omnia.UX"
    xmlns:Converters="clr-namespace:Omnia.Converters;assembly=Omnia.Converters"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480"
    shell:SystemTray.IsVisible="False">

    <phone:PhoneApplicationPage.Resources>
        <Converters:ResourceKeyToPathdataConverter x:Key="ResourceKeyToPathdataConverter"/>
        <Converters:EnumTranslateConverter x:Key="EnumTranslateConverter"/>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot">
        <Grid.DataContext>
            <viewmodel:CategoryEditViewModel/>
        </Grid.DataContext>
        <Grid.Background>
            <ImageBrush ImageSource="{Binding BackgroundImageSource}" Stretch="{Binding GlobalSettings.BackgroundImageStretch}"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="{StaticResource IDS_PAGE_TITLE}" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="{StaticResource IDS_PAGE_HEADER_UPDATE_CATEGORY}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <ScrollViewer>
                <StackPanel>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="auto"/>
                        </Grid.RowDefinitions>
                        <TextBlock VerticalAlignment="Center" Text="{StaticResource IDS_LABEL_CATEGORY_NAME}" 
                                   Style="{StaticResource PhoneTextTitle3Style}" />
                        <TextBox Grid.Column="1" Text="{Binding Path=CurrentEditItem.Name, Mode=TwoWay}" />

                        <TextBlock VerticalAlignment="Center" 
                                   Text="{StaticResource IDS_LABEL_CATEGORY_DESCRIPTION}" 
                                   Style="{StaticResource PhoneTextTitle3Style}" Grid.Row="1"  />
                        <TextBox Grid.Column="1" 
                                 Grid.Row="1" 
                                 Text="{Binding Path=CurrentEditItem.Description, Mode=TwoWay}" />

                        <toolkit:ToggleSwitch IsChecked="{Binding CurrentEditItem.Default, Mode=TwoWay}" 
                                              Grid.ColumnSpan="2"
                                              Grid.Row="2" 
                                              Header="{StaticResource IDS_LABEL_CATEGORY_DEFAULT}"/>

                        <TextBlock VerticalAlignment="Center" 
                                   Text="{StaticResource IDS_LABEL_CATEGORY_KIND}" 
                                   Style="{StaticResource PhoneTextTitle3Style}" Grid.Row="3"  />
                        <ListBox Grid.Column="1" Grid.Row="3" 
                                 VerticalAlignment="Center" Margin="12" 
                                 ItemsSource="{Binding TransactionKinds}" 
                                 SelectedItem="{Binding CurrentEditItem.Kind, Mode=TwoWay}" 
                                 HorizontalAlignment="Right">
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                            <ListBox.ItemContainerStyle>
                                <Style TargetType="ListBoxItem">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="ListBoxItem">
                                                <UX:UXRadioButton IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected, Mode=TwoWay}">
                                                    <TextBlock Style="{StaticResource PhoneTextTitle3Style}" 
                                                               Text="{Binding Converter={StaticResource EnumTranslateConverter}}"/>
                                                </UX:UXRadioButton>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </ListBox.ItemContainerStyle>
                        </ListBox>
                    </Grid>
                    <Grid Height="1" Background="{StaticResource PhoneForegroundBrush}" Margin="12"/>
                    <toolkit:ExpanderView >
                        <toolkit:ExpanderView.Header>
                            <TextBlock Style="{StaticResource PhoneTextTitle3Style}" Text="{StaticResource IDS_LABEL_CATEGORY_SETICON}"/>
                        </toolkit:ExpanderView.Header>
                        <ListBox ItemsSource="{Binding Path=CategoryIcons}" SelectedItem="{Binding CurrentEditItem.IconResourceKey, Mode=TwoWay}">
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <toolkit:WrapPanel></toolkit:WrapPanel>
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>

                            <ListBox.ItemContainerStyle>
                                <Style TargetType="ListBoxItem">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="ListBoxItem">
                                                <Grid>
                                                    <VisualStateManager.VisualStateGroups>
                                                        <VisualStateGroup x:Name="SelecteStates">
                                                            <VisualState x:Name="Normal" />

                                                            <VisualState x:Name="Selected">
                                                                <Storyboard>
                                                                    <!--<ColorAnimation Duration="0" To="Red" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="el"/>-->
                                                                    <DoubleAnimation To="1" Storyboard.TargetProperty="(Grid.Opacity)" Storyboard.TargetName="grid"/>
                                                                </Storyboard>
                                                            </VisualState>
                                                        </VisualStateGroup>
                                                    </VisualStateManager.VisualStateGroups>
                                                    <Grid Name="grid" Opacity="0" Background="{StaticResource PhoneAccentBrush}"/>
                                                    <Path Name="el" Data="{Binding Converter={StaticResource ResourceKeyToPathdataConverter}}" 
                                                          Stretch="Uniform" 
                                                          Fill="{StaticResource PhoneForegroundBrush}" 
                                                          Width="36" Height="36" Margin="12" RenderTransformOrigin="0.5,0.5">
                                                        <Path.RenderTransform>
                                                            <TransformGroup>
                                                                <TransformGroup.Children>
                                                                    <RotateTransform Angle="0" />
                                                                    <ScaleTransform ScaleX="1" ScaleY="1" />
                                                                </TransformGroup.Children>
                                                            </TransformGroup>
                                                        </Path.RenderTransform>
                                                    </Path>
                                                </Grid>

                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </ListBox.ItemContainerStyle>
                        </ListBox>
                    </toolkit:ExpanderView>
                </StackPanel>
            </ScrollViewer>

            <StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Right">
                <UX:UXPathButton Margin="12"
                                 IconPath="{StaticResource PATH_ICON_SUBMIT}"
                                 Padding="11"
                                 Command="{Binding UpdateCommand}"/>
                
                <UX:UXPathButton Margin="12"
                                 IconPath="{StaticResource PATH_ICON_CLOSE}"
                                 Padding="13"
                                 Uri="/Views/CategoriesView.xaml"/>
            </StackPanel>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>
